/*版心*/
.wrapper{
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
/*背景*/
.bigbg {
  width: 100%;
  height: 100vh; /* 使用视口高度作为高度单位 */
  
}


/*开屏动画界面*/
.game  {
  width: 100%;
  height: 100%;
  background-image: url(../images/bg2.png);
  background-repeat: no-repeat;
  background-size: cover;
  border: 10px groove yellow;
  
}

/*游戏名称*/
#gamename{
  position: relative;
  top: 10px;
  left: 10px;
  height: 50px;
  width: 25px;
}
/*开始游戏按钮*/
#open1{
  background-image: url(../images/开始游戏.png);
    background-position: center;
    position: relative;
    left: 39%;
    bottom: -63%;
    width: 366px;
    height: 191px;
    background-size: cover;
}
/*主角头像*/
.bighead {
  background-image: url(../images/bighead.png);
  background-position: center;
  position: absolute;
  top: 148px;
  left: 27px;
  font-size: larger;
  font-weight: bolder;
  font-family: Comic Sans MS;
  color: rgb(0, 0, 0);
  border-radius: 122px;
  width: 214px;
  height: 193px;
  background-size: cover;
  z-index: 999;
 
}

/*帮助按钮*/
#open2{
  background-image: url(../images/bthelp.png);
  background-position: center;
  position: relative;
  left: -99px;
  bottom: -435px;
  font-size: larger;
  font-weight: bolder;
  font-family: Comic Sans MS;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  width: 104px;
  height: 111px;
}
/*音乐播放按钮*/
#mc{
  background-image: url(../images/music0.png);
  background-position: center;
  position: absolute;
  top: 18px;
  left: 18px;
  font-size: larger;
  font-weight: bolder;
  font-family: Comic Sans MS;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  width: 111px;
  height: 111px;
  background-size: cover;
  z-index: 999;
}
/*帮助按钮*/
#help{
  background-image: url(../images/help.png);
  background-position: center;
  position: absolute;
  top: 15px;
  left: 132px;
  font-size: larger;
  font-weight: bolder;
  font-family: Comic Sans MS;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  width: 111px;
  height: 111px;
  background-size: cover;
  z-index: 999;
}
/*地图按钮*/
#where{
  background-image: url(../images/map.png);
  background-position: center;
  position: absolute;
  top: 52px;
  right: 43px;
  font-size: larger;
  font-weight: bolder;
  font-family: Comic Sans MS;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  width: 269px;
  height: 249px;
  background-size: cover;
  z-index: 999;
}
/*背包按钮*/
#bag{ background-image: url(../images/bag.png);
  background-position: center;
  position: absolute;
  bottom: 52px;
  left: 43px;
  font-size: larger;
  font-weight: bolder;
  font-family: Comic Sans MS;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  width: 149px;
  height: 149px;
  background-size: cover;
  z-index: 999;
}
/*宠物按钮*/
#pet{ background-image: url(../images/pet.png);
  background-position: center;
  position: absolute;
  bottom: 52px;
  left: 192px;
  font-size: larger;
  font-weight: bolder;
  font-family: Comic Sans MS;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  width: 149px;
  height: 149px;
  background-size: cover;
  z-index: 999;

}
/*任务按钮*/
#task{ background-image: url(../images/task.png);
  background-position: center;
  position: absolute;
  bottom: 52px;
  left: 342px;
  font-size: larger;
  font-weight: bolder;
  font-family: Comic Sans MS;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  width: 149px;
  height: 149px;
  background-size: cover;
  z-index: 999;

}
/*活动按钮*/
#activity{ background-image: url(../images/activity.png);
  background-position: center;
  position: absolute;
  bottom: 52px;
  left: 492px;
  font-size: larger;
  font-weight: bolder;
  font-family: Comic Sans MS;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  width: 149px;
  height: 149px;
  background-size: cover;
  z-index: 999;

}
/*宠物图鉴按钮*/
#book{ background-image: url(../images/book.png);
  background-position: center;
  position: absolute;
  bottom: 52px;
  left: 788px;
  font-size: larger;
  font-weight: bolder;
  font-family: Comic Sans MS;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  width: 149px;
  height: 149px;
  background-size: cover;
  z-index: 999;

}
  
/*成就按钮*/
#win{ background-image: url(../images/win.png);
  background-position: center;
  position: absolute;
  bottom: 52px;
  left: 492px;
  font-size: larger;
  font-weight: bolder;
  font-family: Comic Sans MS;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  width: 149px;
  height: 149px;
  background-size: cover;
  z-index: 999;

}

/*商店按钮*/
#shop{ background-image: url(../images/shop.png);
  background-position: center;
  position: absolute;
  bottom: 211px;
  left: 43px;
  font-size: larger;
  font-weight: bolder;
  font-family: Comic Sans MS;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  width: 149px;
  height: 149px;
  background-size: cover;
  z-index: 999;

}
/*农场按钮*/
#farm{ background-image: url(../images/farm.png);
  background-position: center;
  position: absolute;
  bottom: 371px;
  left: 43px;
  font-size: larger;
  font-weight: bolder;
  font-family: Comic Sans MS;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  width: 149px;
  height: 149px;
  background-size: cover;
  z-index: 999;

}
/*狩猎按钮*/
#hunt{ background-image: url(../images/hunt.png);
  background-position: center;
  position: absolute;
  bottom: 52px;
  left: 642px;
  font-size: larger;
  font-weight: bolder;
  font-family: Comic Sans MS;
  color: rgb(0, 0, 0);
  border-radius: 10px;
  width: 149px;
  height: 149px;
  background-size: cover;
  z-index: 999;

}


/*按钮动画*/
button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom, #4eb5f1 0%, #389ed8 100%);
  color: #fff;
  transition: background 0.3s ease;
}
/*技能页面下的button*/
#jinen button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to bottom, #4eb5f1 0%, #389ed8 100%);
  color: #fff;
  transition: background 0.3s ease;
}
/* 悬停样式 */
button:not(#bossBox,#mc,#help,#where,#clean,#sell):hover {
  transform: scale(1.5);
}

/* 点击样式 */
button:not(#bossBox)active {
  box-shadow: none;
  transform: translateY(2px);
}

/*渐变*/
.fade-out {
  opacity: 0;
  transition: opacity 0.5s ease;
}
/*出生对话界面*/
.birth{
  width: 100%;
  height: 100%;
  background-image: url(../images/birth.png);
  background-repeat: no-repeat;
  background-size: cover;
  border: 10px groove yellow;
}
body {
  font-family: Arial, sans-serif;
  position: relative; /* 添加这行样式，使得头像和对话框相对于body定位 */
}
/*对话框格式设置*/
.npc-dialog {
  position: absolute; /* 修改为绝对定位，相对于body定位 */
  width: 622px;
  height: 253px;
  top: 65%;
  left: 31%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border: 2px solid #000;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: rgb(235, 255, 102);
  display: none;
  z-index: 999;
}
/*h2内的文字设置*/
.npc-dialog h2{
  font-size: 50px;
}
/*对话框内的文字设置*/
.npc-dialog p {
  font-family: Arial, sans-serif;
  font-size: 30px;
  color: #fff;
  text-shadow: 2px 2px 0 #000;
}
.npc-avatar {
  position: absolute; /* 修改为绝对定位，相对于body定位 */
  top: 57%;
  left: 50%;
  transform: translateY(-50%);
  z-index: 999;
  
}
.npc-avatar img{
  transform: scale(1);
}
.npc-name {
  position: absolute; /* 修改为绝对定位，相对于body定位 */
  top: 50%;
  left: 150px;
  transform: translateY(-50%);
  display: none;
  z-index: 999;
}
/* 添加新的CSS类，用来隐藏所有头像 */
.hidden-avatar {
  display: none;
 
}
/*抖动特效*/
@keyframes shake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-10px, 0); }
  40% { transform: translate(10px, 0); }
  60% { transform: translate(-10px, 0); }
  80% { transform: translate(10px, 0); }
  100% { transform: translate(0, 0); }
}
#dialog1,#dialog2,#dialog6,#dialog13,#dialog14 {
  animation: shake 0.5s;
}

/*村子*/
.cunzi{
  width: 100%;
  height: 100%;
  background-image: url(../images/bg3.png);
  background-repeat: no-repeat;
  background-size: cover;
  border: 10px groove yellow;
  z-index: 1;
}
/*野外*/

.yewai{
  width: 100%;
  height: 100%;
  background-image: url(../images/index4bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  border: 10px groove yellow;
  z-index: 1;
}
 /* 添加样式来表示主角 */
 #character {
  position: absolute;
  width: 150px;
  height: 150px;
  
  transition: transform 0.3s;
  z-index: 999;
}
#character img{
  transform: scale(1);
}
#up,
#left,
#right
{
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  display: none;
}
#down{
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px;
  display: block;
}
.cute{
  width: 100px;
  height: 100px;
  position: relative;
  display: inline-block;
  margin-right: 20px;}
#cute1{
  position: relative;
  top: 100px;
  left: 362px;
}
#cute2{
  position: relative;
  top: 100px;
  left: 427px;
}

#cute3{
  position: relative;
  top: 100px;
    left: 510px;
}

.cute img{
  transform: scale(0.3);
}
.cute {
  position: absolute;
  animation: jump 1s infinite alternate ease-in-out;
}
/*传送门*/
.slideshow-container {
  position: relative;
  top: -263px;
  left: 733px;
  width: 275px;
  height: 210px; /* 设置图片的高度 */
  overflow: hidden; /* 隐藏溢出的部分 */
  z-index: 999;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; /* 默认隐藏所有图片 */
  transition: opacity 1s ease-in-out; /* 设置过渡动画效果 */
}

.slide.active {
  opacity: 1; /* 显示当前活动的图片 */
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填充容器，保持比例并裁剪溢出部分 */
  z-index: 999;
}

/* 添加自动轮播效果 */
@keyframes slideshow {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.slideshow-container .slide:nth-child(1) {
  animation: slideshow 8s infinite; /* 控制轮播时间，这里是8秒 */
}

.slideshow-container .slide:nth-child(2) {
  animation: slideshow 8s infinite 4s; /* 第二张图片从第4秒开始轮播 */
}


.beimen img{
  height: 100px;
}
@keyframes jump {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10px);
  }
}
.popup{
  display: none;
  position: absolute;
  height: 815px;
  width: 1267px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: rgba(190, 165, 25, 0.728) ;
  border: 20px solid #ccc;
  text-align: center;
  z-index: 999;
}
/* 弹窗容器的样式 */
.popupa {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px #ccc;
  padding: 20px;
  z-index: 999;
}

/* 弹窗内容的样式 */
.popup-content {
  text-align: center;
}

/* 关闭按钮的样式 */
.close-popup {
  margin-top: 10px;
}

.small{
  background-color: #fff;
}
.jinen{
  background-image: url();
  background-color: #dc7916;
}
.whoisit{background-color: #df954b;}

.cutename{
  font: 50px white;
  display: inline;
  border: 10px solid black;
}
.cutename{
  display: inline;
}

.small{
  float: left;
  border: 10px solid black;
  margin-right: 50px;
}
.small img{
width: 300px;
}
.big{
  float: left;
  border: 10px solid black;
}
.big img{
width: 388px;
}
.choose{ 
  border: 10px solid black;
position: relative;

}

.choose button{
  width: 100px;
  height: 50px;
}
.cutename {
  display: flex; /* 将包含 h2 元素的容器设置为 flex 容器 */
}
h2 {
  flex: 1; /* 让 h2 元素自动调整宽度以适应剩余空间 */
}
/*宠物背景介绍盒子*/
.whoisit{
  border: 10px solid black;
}
/*宠物背景介绍中的文字*/
.whoisit p{
 font-size: 30px;
}
.jinen{
  border: 10px solid black;
 
}
/* 加载动画 */
.loading-animation {
  display: none; /* 初始隐藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
  z-index: 9999; /* 置于其他元素之上 */
}

.loading-animation img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 弹出图片 */
.popup-image {
  display: none; /* 初始隐藏 */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999; /* 置于其他元素之上 */
}

.popup-image img {
  max-width: 80vw; /* 图片最大宽度为视口宽度的80% */
  max-height: 80vh; /* 图片最大高度为视口高度的80% */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* 添加阴影 */
  border-radius: 10px; /* 添加圆角边框 */
}
#popupImage li{
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px #ccc;
  text-align: center;
  padding: 10px;
  transition: all 0.3s;
}
#popupImage li:hover{
  transform: scale(1.1);
}


.boss1 {
  background-image: url(../images/bigboss1.png);
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 350px;
  background-size: cover;
  transform: translate(-50%, -50%);
  animation: bossWalk 4s infinite alternate;
}

@keyframes bossWalk {
  0% {
    left: 0;
  }
  50% {
    left: calc(100% - 350px);
  }
  100% {
    left: 0;
  }
}




/*pk*/
.pk{
  width: 100%;
  height: 100%;
  background-image: url(../images/pk.webp);
  background-repeat: no-repeat;
  background-size: cover;
  border: 10px groove yellow;
}

/*背包*/
.beibao{
  width: 1500px;
  height: 917px;
  background-image: url(../images/背包.png);
  background-size: cover;
}
/*背包内部按钮*/
#clean{
  width: 344px;
    height: 117px;
    background-image: url(../images/clean.png);
    background-size: cover;
    position: relative;
    margin-right: 49px;
    bottom: -732px;
    right: -433px;
}
#clean:hover{
  transform: scale(1.1);
}
#sell{
  width: 344px;
    height: 117px;
    background-image: url(../images/sell.png);
    background-size: cover;
    position: relative;
    margin-right: 49px;
    bottom: -735px;
    right: -390px;
}
#sell:hover{
  transform: scale(1.1);
}
#bagPopup .close-popup{
  background-image:url(../images/背包关闭.png) ;
  background-size: cover;
  position: relative;
  width: 100px;
  height: 100px;
  bottom: 30px;
    right: -320px;
}
/*宠物*/
.chongwu{
  width: 1634px;
  height: 917px;
  background-image: url(../images/宠物_after_after.jpg);
  background-size: cover;
}

#petPopup .close-popup{
  background-image:url(../images/petclose.png) ;
  background-size: cover;
  position: relative;
  width: 66px;
  height: 53px;
  bottom: 869px;
  right: -573px;
}
/*任务*/
/*角色大头*/
.task .head{
  height: 500px;
  background-size: cover;
}
/*进度条设计*/
.progress-bar {
  width: 100%;
  background-color: #362e2e;
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
}

.progress-line {
  height: 100%;
  background-color: #4caf50;
  margin: 0;
  padding: 0;
  transition: width 0.3s ease; /* 添加动画效果 */
}

#head1{
  background-image: url(../images/2oldman_after.png);
}
#head2{
  background-image: url(../images/oldman_after.png);
}
#head3{
  background-image: url(../images/girl_after.png);
}
#head4{
  background-image: url(../images/cat_after.png);
}
 #taskPopup .popup-content {
  height: 800px;
  overflow-y: scroll;} 
/*任务里的按钮功能*/
.have{
  width: 150px;
  height: 50px;
  
}
.o{
  background-color: rgb(230, 223, 25);
}
.t{background-color: #afb47e;}

/*成就*/
#winPopup .popup-content {
  height: 800px;
  overflow-y: scroll;}
  .chengjiu .head{
    height: 500px;
    background-size: cover;
  }
  #head5{
    background-image: url(../images/hello_after.png);
  }
  #head6{
    background-image: url(../images/shine_after.png);
  }
  #head7{
    background-image: url(../images/stage_after.png);
  }
  #head8{
    background-image: url(../images/byebye_after.png);
  }

/*商城*/
.shop{
  width: 1634px;
  height: 917px;
  background-image: url(../images/shop.webp);
  background-size: cover;
}
/*图鉴*/
.book img{
  width: 200px;
  float: left;
}

.book{
  height: 500px;
  overflow-y: scroll;
}






@keyframes dong {
  0% {
      transform:scale(1,1);
  }

  50% {
      transform:scale(1.2,1.2);
  }

  100% {
      transform:scale(1,1);
  }
}

/* 成熟动画 */
#chengshu {
  background-size: cover;
  background-position: center;
  animation: dong 2s linear 0s infinite;
}

/* 背景 */
.wrap {
  width: 750px;
  height: 1333px;
  border: 1px solid black;
  margin: 0 auto;
  position: relative;
  background-image: url(../others/nc/农场背景.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
  top: 50px;
}

/* 土地大背景 */
.tudi {
  width: 300px;
  height: 385px;
  box-sizing: border-box;
  padding: 100px 25px;
  position: absolute;
  top: 95px
}

/* 小块土地 */
.tudi>div {
  width: 217px;
  height: 103px;
  box-sizing: border-box;
  float: left;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  background-size: cover;
  background-position: center;
  position: absolute;
  /* top: 691px;
  left: 442px; */
  border-radius: 50%;
}

/* 菜单背景 */
.caidan {
  position: absolute;
  width: 300px;
  height: 65px;
  box-sizing: border-box;
  padding: 0px 10px;
  top: 386px;

}

/* 菜单小图标 */
.caidan>div {
  width: 131px;
  height: 122px;
  box-sizing: border-box;
  float: left;
  color: rgb(0, 0, 0, 0);
  line-height: 50px;
  text-align: center;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 707px;
}

/* 选中提示 */
.xuan {
  transform: scale(1.15, 1.15);
  /* background-color: yellow; */
}

/* 挖div */
.wai {
  position: absolute;
  width: 74px;
  height: 83px;
  display: none;
  background-image: url(../others/nc/chan.png);
  background-size: cover;
  background-position: center;
  top: 940px;
  right: 70px;
}

/* 采摘div */
.cai {
  position: absolute;
  width: 107px;
  height: 95px;
  left: 35px;
  display: none;
  background-image: url(../others/nc/cai.png);
  background-size: cover;
  background-position: center;
  top: 940px;
}

/* 植物 */
.zhiwu {
  width: 217px;
  height: 103px;
  background-image: url(../others/nc/植物.png);
  background-size: 71px 69px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  position: absolute;
  /* top: 10px; */
  /* left: 10px; */

}
span{
  width: 100%;
  height: 20%;
  position: absolute;
  top:-10px;
  left: 10px;
  font-size: 20px;
  color: red;
}
.table_top{
  width: 100%;
  height: 150px;
  border: 1px solid green;
  /* background-color: white; */
  position: absolute;
  top: 110px;
  border-radius: 30px;
  font-size: 50px;
  line-height: 150px;
}
.table_left{
  width: 150px;
  height: 100px;
  /* border: 1px solid red; */
  /* background-color: white; */
  position: absolute;
  top: 25px;
  left: 120px;
  border-radius: 30px;
  font-size: 35px;
  line-height: 100px;
}
.table_right{
  width: 150px;
  height: 100px;
  /* border: 1px solid red; */
  /* background-color: white; */
  position: absolute;
  top: 25px;
  right: 10px;
  border-radius: 30px;
  font-size: 35px;
  line-height: 100px;
}
.table_zhong1{
  width: 150px;
  height: 100px;
  /* border: 1px solid red; */
  /* background-color: white; */
  position: absolute;
  top: 25px;
  right: 166px;
  border-radius: 30px;
  font-size: 35px;
  line-height: 100px;
}
.table_zhong2{
  width: 150px;
  height: 100px;
  /* border: 1px solid red; */
  /* background-color: white; */
  position: absolute;
  top: 25px;
  left: 275px;
  border-radius: 30px;
  font-size: 35px;
  line-height: 100px;
}